<template>
  <div class="chatBox">
    <div class="imgBox" :style="{right:state.sleepwakeShow==1?'-35px':''}">
      <img v-if="state.sleepwakeShow==1" :class="state.enterShow?'leave-activet':'enter-active'"
        src="./chatCom/Sleep.gif" alt="" @click="sleepwakeClick(2)" @mouseenter="sleepwakeClick(6)" />
      <img v-if="state.sleepwakeShow==2" :class="state.enterShow?'leave-active':'enter-active'"
        src="./chatCom/WakeUp.gif" alt="" @click="sleepwakeClick(1)" />
      <img v-if="state.sleepwakeShow==3" src="./chatCom/noMan.png" alt="" @click="sleepwakeClick(3)" />
    </div>
    <!-- 机器人模型展示 -->
    <mascotThree class="mascotBox" v-if="state.aniShow" @anithreeClick="anithreeClick"
      :style="{zIndex: state.sleepwakeShow ==2 ? 13 : 12}">
    </mascotThree>
    <!-- 会话框显示 -->
    <chatDrawerBox :newEvent="state.newEvent" class="chatDrawerBox animate__animated animate__fadeInBottomRight"
      v-if="state.show">
    </chatDrawerBox>
  </div>
</template>
<script setup>
  import {
    computed,
    nextTick,
    reactive,
    watchEffect,
    watch
  } from "vue";
  import axios from "axios";
  import mascotThree from "./mascot-three";
  import chatDrawerBox from "./chatDrawerBox";
  import usePagesStore from '@/store/modules/pages'
  const props = defineProps({
    descList: {
      type: Array,
      default: () => {
        return [];
      },
    }
  });
  const state = reactive({
    show: false, //会话框显示
    aniShow: false, //机器人显示
    sleepwakeShow: 1, //1.睡觉 2.睡醒 3. 没人
    enterShow: false,
    newEvent: undefined
  })
  const eventStore = usePagesStore()

  function sleepwakeClick(type) {
    // if(type== 5){
    //   state.sleepwakeShow=1
    //   state.enterShow=true
    // }
    if (type == 6) {
      state.sleepwakeShow = 2
      state.enterShow = false
    }
    if (type == 1) {
      state.aniShow = true
      state.sleepwakeShow = 2
      setTimeout(() => {
        state.sleepwakeShow = 3
      }, 400)
      setTimeout(() => {
        state.show = true
        state.sleepwakeShow = 4
      }, 2000)
    } else if (type == 2) {
      state.aniShow = false
      state.sleepwakeShow = 2
    }
  }

  function anithreeClick(type) {
    if (type == 2) {
      state.aniShow = false
      state.show = false
      state.enterShow = true
      // setTimeout(() => {
      state.sleepwakeShow = 2
      // }, 50)
      setTimeout(() => {
        state.sleepwakeShow = 1
      }, 300);
    }
    if (type == 1) {
      state.show = false
      state.sleepwakeShow = 3
    }
    if (type == 4) {
      state.sleepwakeShow = 3
    }
  }
  watch(
    () => eventStore.eventGlobalValue,
    (newEvent) => {
      if (newEvent) {
        if (newEvent) {
          state.sleepwakeShow == 2
          state.aniShow = true
          setTimeout(() => {
            state.show = true
          }, 1000);
          state.newEvent = newEvent
        }
        console.log('接收到全局事件:', newEvent);
        // 执行自定义逻辑...
      }
    }
  );
  watchEffect(() => {})
</script>

<style lang="scss" scoped>
  .chatBox {
    .imgBox {
      position: fixed;
      right: -20px;
      bottom: 80px;
      width: 70px;
      height: 35px;

      img {
        width: 100%;
        height: 100%;
        max-width: 100%;
        display: inline-block;
      }
    }

    .mascotBox {
      position: fixed;
      right: 10px;
      bottom: 10px;
      width: 160px !important;
      height: 220px !important;
    }

    .chatDrawerBox {
      position: fixed;
      right: 50px;
      bottom: 30px;
      top: 140px;
      z-index: 1;
      animation-delay: 1.2s;
    }
  }

  .enter-active {
    animation: slideout 0.8s linear;
  }

  .leave-active {
    animation: slidein 1s linear reverse;
  }

  .leave-activet {
    animation: slideint 0.8s linear reverse;
  }

  @keyframes slidein {
    from {
      transform: translateX(10px);
    }

    to {
      transform: translateX(-15px);
    }
  }

  @keyframes slideint {
    from {
      transform: translateX(0px);
    }

    to {
      transform: translateX(-15px);
    }
  }

  @keyframes slideout {
    from {
      transform: translateX(15px);
    }

    to {
      transform: translateX(0px);
    }
  }

  .chatBox {
    cursor: pointer;
  }
</style>